﻿@model UniversityPortal.Models.User.ChangePasswordModel

@{
    ViewBag.Title = "Change Essential Elements";
}

<h2>Change Essential Elements</h2>

<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>

    <fieldset>
         <legend>Change Login</legend>
        <div class="editor-label">
           New Login
        </div>
        <div class="editor-field">
            <input id="loginField" class="text-box single-line password valid" type="text" />
        </div>
        <button id="changeLogin" class="btn" onclick="ChangeLogin()">Save</button>
        <span id="changeLogDoneMessage" style="display:none; color:#067d08"> Done </span>
        <span id="changeLogErrorMessage" style="display:none; color:#f00"> Wrong login </span>
    </fieldset>


@using (Html.BeginForm()) {
        
    @Html.ValidationSummary(true)
    <fieldset>
        <legend>Change Password</legend>

        <div class="editor-label">
            @Html.LabelFor(model => model.OldPassword)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.OldPassword)
            @Html.ValidationMessageFor(model => model.OldPassword)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.NewPassword)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.NewPassword)
            @Html.ValidationMessageFor(model => model.NewPassword)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.ConfirmPassword)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.ConfirmPassword)
            @Html.ValidationMessageFor(model => model.ConfirmPassword)
        </div>

        <p>
            <button id="changePassword" class="btn" onclick="ChangePassword()">Save</button>
            <span id="changePassDoneMessage" style="display:none; color:#067d08"> Done </span>
        </p>
    </fieldset>
}


<script>
    function ChangeLogin() {
        var newLogin = document.getElementById("loginField").value;
        $.get("/User/ChangeUserLogin", newLogin, function (data) {
            document.getElementById("loginField").value = "";
            if ("True" == data) {
                $("#changeLogDoneMessage").show("fast");
                $("#changeLogDoneMessage").hide("highlight", 2000);
            }
            else {
                $("#changeLogErrorMessage").show("fast");
                $("#changeLogErrorMessage").hide("highlight", 2000);
            }
        });
        
    };

    function ChangePassword() {
        $("#changePassDoneMessage").show("fast");
        $("#changePassDoneMessage").hide("highlight", 2000);
    };
</script>